<template>
  <div id="contractErpRelation">
    <el-container>
      <el-main>
        <el-row>
          <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-row class="floatLeft">
              <el-form-item label="合同编号">
                <el-input placeholder="合同编号" v-model="form.contractNo"></el-input>
              </el-form-item>
              <el-form-item label="合同名称">
                <el-input placeholder="合同名称" v-model="form.contractName"></el-input>
              </el-form-item>
              <el-form-item label="计收方式">
                <el-select v-model="form.signWay" filterable placeholder="请选择">
                  <el-option
                    v-for="item in signWayData"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
<!--                <el-form-item label="业务类型" prop="businessCoding">-->
<!--&lt;!&ndash;                  <el-select v-model="form.businessCoding" filterable placeholder="请选择">&ndash;&gt;-->
<!--&lt;!&ndash;                    <el-option&ndash;&gt;-->
<!--&lt;!&ndash;                      v-for="item in businessCodingData"&ndash;&gt;-->
<!--&lt;!&ndash;                      :key="item.value"&ndash;&gt;-->
<!--&lt;!&ndash;                      :label="item.label"&ndash;&gt;-->
<!--&lt;!&ndash;                      :value="item.value">&ndash;&gt;-->
<!--&lt;!&ndash;                    </el-option>&ndash;&gt;-->
<!--&lt;!&ndash;                  </el-select>&ndash;&gt;-->
<!--                  <el-cascader :options="businessCodingData" :show-all-levels="false" @change="selectChange"></el-cascader>-->
<!--                </el-form-item>-->
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="small" @click="searchFn" icon="el-icon-search">搜索</el-button>
              </el-form-item>
            </el-row>
          </el-form>
        </el-row>
        <el-row class="floatLeft">
          <el-button type="primary" size="small" @click="createContract" plain>新增</el-button>
        </el-row>
        <el-table
          :header-cell-style="{background:'#eef1f6',color:'#606266'}"
          size="mini"
          :data="tableData"
          highlight-current-row
          border
          style="width: 100%"
          height="800">
          <el-table-column label="序号"
                           type="index"
                           width="50"></el-table-column>
          <el-table-column prop="contractNoGlobal" label="合同编号"></el-table-column>
          <el-table-column prop="contractName" label="合同名称" width="280"></el-table-column>
          <el-table-column prop="repositoryNameUnicom" label="我方主体"></el-table-column>
          <el-table-column prop="repositoryNameVendor" label="客户名称"></el-table-column>
          <el-table-column prop="businessName" label="业务类型"></el-table-column>
          <el-table-column prop="signWayName" label="计收方式"></el-table-column>
          <el-table-column prop="trellisCode" label="网格编码"></el-table-column>
          <el-table-column prop="trellisname" label="所属网格"></el-table-column>
          <el-table-column prop="yzStaffId" label="客户经理编码"></el-table-column>
          <el-table-column prop="accountmanager" label="客户经理"></el-table-column>
          <el-table-column prop="comName" label="公司名称"></el-table-column>
          <el-table-column prop="deptCode" label="部门代码"></el-table-column>
          <el-table-column prop="deptName" label="部门名称"></el-table-column>
          <el-table-column prop="contractDesc" label="合同注释"></el-table-column>
          <el-table-column prop="contractTimelimitName" label="合同履行期限"></el-table-column>
          <el-table-column prop="performPersonName" label="履行人姓名"></el-table-column>
          <el-table-column prop="performDeptName" label="履行人部门"></el-table-column>
          <el-table-column prop="isRenew" label="是否续签"></el-table-column>
          <el-table-column prop="takerCode" label="承办人代码"></el-table-column>
          <el-table-column prop="takerName" label="承办人名称"></el-table-column>
          <el-table-column prop="takerMobile" label="承办人联系方式"></el-table-column>
          <el-table-column prop="arrairAmount" label="当前合同总金额"></el-table-column>
          <el-table-column prop="companyid" label="公司ID"></el-table-column>
          <el-table-column prop="signDate" label="签约时间"></el-table-column>
          <el-table-column prop="startDate" label="合同履行开始时间"></el-table-column>
          <el-table-column prop="endDate" label="合同履行结束时间"></el-table-column>
          <el-table-column prop="signDeptName" label="签约部门"></el-table-column>
          <el-table-column prop="creationDate" label="合同创建时间" :formatter="formatterCreationDate"></el-table-column>
          <el-table-column prop="remark" label="备注"></el-table-column>
          <el-table-column prop="inputDate" label="录入日期" :formatter="formatter"></el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
              <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
        background
        layout="prev, pager, next"
        :total=total
        :hide-on-single-page="false"
        :page-size="10"
        @current-change="currentChange">
        </el-pagination>
        <el-dialog title="维护合同" class="dialogTitle" :visible.sync="dialogTableVisible" @open="openDialog" width="80%">
          <el-form :inline="true" :model="dialog.searchForm" class="demo-form-inline">
            <el-row class="floatLeft">
              <el-form-item label="合同编号">
                <el-input placeholder="合同编号" v-model="dialog.searchForm.contractNo"></el-input>
              </el-form-item>
              <el-form-item label="合同名称">
                <el-input placeholder="合同名称" v-model="dialog.searchForm.contractName"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="small" @click="dialogSearchFun" icon="el-icon-search">搜索</el-button>
              </el-form-item>
            </el-row>
          </el-form>
          <el-table :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                    size="mini" :data="dialog.tableData" @row-click="getRowDetails" height="300px" highlight-current-row border>
            <el-table-column label="序号"
                             type="index"
                             width="50"></el-table-column>
            <el-table-column prop="contractNoGlobal" label="合同编号"></el-table-column>
            <el-table-column prop="contractName" label="合同名称"></el-table-column>
            <el-table-column prop="trellisname" label="所属网格"></el-table-column>
            <el-table-column prop="accountmanager" label="客户经理"></el-table-column>
            <el-table-column prop="repositoryNameUnicom" label="我方主体名称"></el-table-column>
            <el-table-column prop="repositoryNameVendor" label="对方主体名称"></el-table-column>
            <el-table-column prop="creationDate" label="创建时间" ></el-table-column>
          </el-table>
          <el-main>
            <el-form ref="dialogForm" :inline="true" :rules="dialog.rules" :model="dialog.form" label-width="100px"
                     style="float: left">
                <el-form-item label="合同编号" prop="contractNoGlobal">
                  <el-input v-model="dialog.form.contractNoGlobal" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="计收方式" prop="signWay">
                  <el-select v-model="dialog.form.signWay" filterable placeholder="请选择">
                    <el-option
                      v-for="item in signWayData"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
<!--              <el-form-item label="业务类型" prop="businessCoding">-->
<!--                <el-select v-model="dialog.form.businessCoding" filterable placeholder="请选择">-->
<!--                  <el-option-->
<!--                    v-for="item in businessCodingData"-->
<!--                    :key="item.value"-->
<!--                    :label="item.label"-->
<!--                    :value="item.value">-->
<!--                  </el-option>-->
<!--                </el-select>-->
<!--              </el-form-item>-->
              <el-form-item label="网格名称" prop="trellisName" label-width="110px">
                <el-select @change="getStaffsFirst" v-model="dialog.form.trellisCode" filterable placeholder="请选择" >
                  <el-option
                    v-for="item in depts"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    <span style="float: left">{{ item.label }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="客户经理" prop="accountManager" >
                <el-select  v-model="dialog.form.yzStaffId" filterable placeholder="请选择">
                  <el-option
                    v-for="item in staffs"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    <span style="float: left">{{ item.label }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="备注" prop="remark">
                <el-input type="textarea" v-model="dialog.form.remark" maxlength="500"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('dialogForm')">确定</el-button>
                <el-button @click="dialogTableVisible = false">关闭</el-button>
                <el-button @click="resetForm">重置</el-button>
              </el-form-item>
            </el-form>
          </el-main>
        </el-dialog>
      </el-main>
    </el-container>
    <router-view/>
  </div>


</template>

<script>
  import '@/assets/supply.css'
  import axios from 'axios'
  import {getUrlParams} from '../../components/utils/getUrlParams'
  import {getBaseDataList, queryContractImportantList, queryContractListCount,getBaseDataParent,getDept,
    getDeptStaff} from '../../components/utils/getDataFn'
  import global from '../../components/utils/global'
  import {formatDate} from '../../components/utils/formatDate'

  export default {
    name: 'contractErpRelation',
    methods: {
      getStaffsFirst(){
        this.form.yzStaffId='';
        getDeptStaff(this.form.trellisCode,this);
      }   ,
      getStaffs(){
        this.dialog.form.yzStaffId='';
        getDeptStaff(this.dialog.form.trellisCode,this);
      }   ,
      createContract () {
        this.dialogTableVisible = true
        this.isCreate = true
      },
      handleEdit (row) {
        this.isCreate = false
        for (let item in this.dialog.form) {
          if (item in row) {
            this.dialog.form[item] = row[item]
          }
        }
        this.dialogTableVisible = true
      },
      selectChange(value) {
        this.form.businessCoding = value[1];//value 是个数组 取第二个值
      },
      resetForm () {
        if (this.isCreate === true) {
          for (let item in this.dialog.form) {
            if(item !=='staffId'){
              this.dialog.form[item] = ''
            }
          }
        }
      },
      handleDelete (row) {
        this.open(row)
      },
      formatter (row, column) {
        row.inputDate = formatDate(new Date(row.inputDate), 'yyyy-MM-dd')
        return row.inputDate
      },
      formatterCreationDate(row, column){
        row.creationDate = formatDate(new Date(row.creationDate), 'yyyy-MM-dd')
        return row.creationDate
      },

      searchFn () {
        this.startSize = 0
        this.endSize = 11
        this.currentPage = 1
        this.queryContractList()
        this.queryContractListCount()
      },
      refreshTable () {
        this.queryContractList()
        this.queryContractListCount()
      },
      onSubmit () {
        this.queryContractList()
        this.queryContractListCount()
      },
      queryContractList: function () {
        let _this = this
        _this.getQueryParams()
        console.log(_this.queryParams);
        axios({
          methods: 'get',
          url: global.host + '/nmErpContractRelation/getContractImportantList',
          params: {params: JSON.stringify(_this.queryParams)}
        }).then(res => {
          console.log(res)
          _this.tableData = res.data
        })
      },
      queryContractListCount: function () {
        let _this = this
        _this.getQueryParams()
        axios({
          methods: 'get',
          url: global.host + '/nmErpContractRelation/getContractImportantCount',
          params: {params: JSON.stringify(_this.queryParams)}
        }).then(res => {
          console.log(res)
          _this.total = res.data
        })
      },
      currentChange (cpage) {
        let _this = this
        _this.currentPage = cpage
        _this.startSize = cpage * 10 - 10
        _this.endSize = cpage * 10
        this.onSubmit()
      },
      dialogCurrentChange (cpage) {
        let _this = this
        _this.dialog.currentPage = cpage
        _this.dialog.startSize = cpage * 10 - 10
        _this.dialog.endSize = cpage * 10
        this.dialogSearchFun()
      },
      getQueryParams () {
        this.queryParams = {
          startSize: this.startSize,
          endSize: this.endSize,
          contractName: this.form.contractName,
          contractNo: this.form.contractNo,
          signWay: this.form.signWay,
          staffId: this.staffId,
          businessCoding : this.form.businessCoding
        }
      },
      //构造弹出表单参数
      getDialogQueryParams () {
        this.dialog.queryParams = {
          startSize: this.dialog.startSize,
          endSize: this.dialog.endSize,
          contractNo: this.dialog.searchForm.contractNo,
          signWay: this.dialog.searchForm.signWay,
          staffId: this.dialog.form.staffId,
          businessCoding:this.dialog.form.businessCoding
        }
        return this.dialog.queryParams
      },
      getRowDetails (row) {
        this.dialog.form.contractNoGlobal = row.contractNoGlobal
      },
      dialogSearchFun () {
        this.dialog.contractDialogData = queryContractImportantList(this.getDialogQueryParams(), this)
        this.dialog.total = queryContractListCount(this.getDialogQueryParams(), this) //调用合同明细Count
      },
      openDialog () {
        document.getElementsByClassName('el-dialog__title').innerText = '新增合同计费方式'
        if (this.isCreate === false) {
          document.getElementsByClassName('el-dialog__title').innerText = '修改合同计费方式'
        }
      },
      submitForm (formName) {
        let _this = this
        let url = global.host + '/nmErpContractRelation/insert'
        if (this.isCreate === false) {
          url = global.host + '/nmErpContractRelation/update'
        }
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let renew = this.dialog.form
          debugger
            axios.post(url, renew).then((res) => {
              console.log(res)
            debugger
              if (res.data.success === true) {
                _this.refreshTable()
                _this.dialogTableVisible = false
                _this.open1(res.data.message)
              } else {
                _this.open2(res.data.message)
              }
            })
          } else {
            return false
          }
        })
      },
      open1 (msg) {
        this.$message({
          message: msg,
          type: 'success'
        })
      },
      open2 (msg) {
        this.$message({
          message: msg,
          type: 'warning'
        })
      },
      open (row) {
        let _this = this
        this.$confirm('请确认是否删除该条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        debugger
          let params = {id: row.id, staffId: this.staffId}
          axios.post(global.host + '/nmErpContractRelation/delete', params).then((res) => {
            console.log(res)
          debugger
            if (res.data.success === true) {
              _this.refreshTable()
              _this.$message({
                type: 'success',
                message: '删除成功!'
              })
            } else {
              _this.$message({
                type: 'info',
                message: '已取消删除'
              })
            }
          })
        })
      }
    },
    created () {
      this.staffId = getUrlParams('staffId')
      this.dialog.form.staffId = getUrlParams('staffId')
      console.log(this.dialog.form.staffId)
      getBaseDataList(1001, this)
      getBaseDataParent(this)
      getDept(this);
    }
    ,
    data () {
      return {
        staffs:[],
        depts:[],
        isCreate: true,// true 新增  false 修改
        signWayData: [], //下来字典
        businessCodingData: [], //业务类型
        dialogTableVisible: false,
        tableData: [],
        total: 0,
        currentPage: 1,
        startSize: 0,
        endSize: 11,
        queryParams: {},
        dates: [],
        dialogFormVisible: false,
        formLabelWidth: '120px',
        fileList: [],
        form: {
          contractName: '',
          contractNo: '',
          signWay: '',
          businessCoding:''
        },
        staffId: '',
        dialog: {
          searchForm: {
            contractName: '',
            contractNo: '',
          },
          form: {
            id: '',
            contractNoGlobal: '',
            businessCoding: '',
            signWay: '',
            remark: '',
            staffId: '',
            yzStaffId:'',
            trellisCode:''
          },
          total: 0,
          tableData: [],
          currentPage: 1,
          startSize: 0,
          endSize: 21,
          queryParams: {},
          rules: {
            contractNoGlobal: [{required: true, message: '合同编号', trigger: 'blur'}],
            signWay: [{required: true, message: '请选择计收类型', trigger: 'change'}],
            yzStaffId: [{required: true, message: '客户经理', trigger: 'blur'}],
            trellisCode: [{required: true, message: '所属网格', trigger: 'change'}],
          }
        },

      }
    }
  }
</script>

<style>
  #contractErpRelation {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 20px;
  }

  html, body {
    height: auto;
  }
</style>
